<template>
  <div>
    <el-form
      :inline="true"
      size="small"
      :model="memberSearch"
      ref="ruleForm"
      class="demo-form-inline"
    >
      <el-form-item prop="id">
        <el-input
          v-model="memberSearch.id"
          clearable
          @clear="getMemberList"
          placeholder="会员ID"
        ></el-input>
      </el-form-item>
      <el-form-item prop="cardNum">
        <el-input
          v-model="memberSearch.cardNum"
          placeholder="会员卡号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="memberSearch.name" placeholder="会员名字"></el-input>
      </el-form-item>
      <el-form-item prop="payType">
        <el-select v-model="memberSearch.payType" placeholder="支付类型">
          <el-option
            v-for="(item, index) in payType"
            :key="index"
            :label="item.name"
            :value="item.type"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="birthday">
        <el-date-picker
          v-model="memberSearch.birthday"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchMember">查询</el-button>
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="memberList" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column prop="cardNum" label="会员卡号"> </el-table-column>
      <el-table-column prop="name" label="会员名字" width="80">
      </el-table-column>
      <el-table-column prop="birthday" label="会员生日" width="130">
      </el-table-column>
      <el-table-column prop="phone" label="手机号码" width="130">
      </el-table-column>
      <el-table-column prop="integral" label="可用积分" width="100">
      </el-table-column>
      <el-table-column prop="money" label="开卡金额" width="80">
      </el-table-column>
      <el-table-column prop="payType" label="支付类型" width="80">
        <template slot-scope="scope">
          {{ scope.row.payType | filterPayType }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="会员地址" width="250">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="openEditDialog(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="removeMember(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[7, 10, 15, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 新增会员 -->
    <el-dialog title="新增会员" :visible.sync="dialogVisible" width="500px">
      <span>
        <el-form
          :model="addMember"
          :rules="addRules"
          ref="addMember"
          label-width="100px"
          class="demo-ruleForm"
          style="width: 400px"
        >
          <el-form-item label="会员卡号" prop="cardNum">
            <el-input
              v-model.trim="addMember.cardNum"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="会员名字" prop="name">
            <el-input
              v-model.trim="addMember.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="会员生日" prop="birthday">
            <el-date-picker
              style="width: 150px"
              v-model="addMember.birthday"
              value-format="yyyy-MM--dd"
              type="date"
              placeholder="请点击选择"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model.trim="addMember.phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="开卡金额" prop="money">
            <el-input
              v-model.trim="addMember.money"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="可用积分" prop="integral">
            <el-input
              v-model.trim="addMember.integral"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="支付类型" prop="payType">
            <el-select
              v-model="addMember.payType"
              style="width: 150px"
              placeholder="请点击选择"
            >
              <el-option
                :label="item.name"
                v-for="(item, index) in payType"
                :key="index"
                :value="item.type"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员地址" prop="address">
            <el-input
              type="textarea"
              v-model.trim="addMember.address"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addForm('addMember')">取 消</el-button>
        <el-button type="primary" @click="addMemberForm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑会员" :visible.sync="editDialogVisible" width="500px">
      <span>
        <el-form
          :model="editMember"
          :rules="editRules"
          ref="editMember"
          label-width="100px"
          class="demo-ruleForm"
          style="width: 400px"
        >
          <el-form-item label="会员卡号" prop="cardNum">
            <el-input
              v-model.trim="editMember.cardNum"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="会员名字" prop="name">
            <el-input
              v-model.trim="editMember.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="会员生日" prop="birthday">
            <el-date-picker
              style="width: 150px"
              v-model="editMember.birthday"
              value-format="yyyy-MM--dd"
              type="date"
              placeholder="请点击选择"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model.trim="editMember.phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="开卡金额" prop="money">
            <el-input
              v-model.trim="editMember.money"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="可用积分" prop="integral">
            <el-input
              v-model.trim="editMember.integral"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="支付类型" prop="payType">
            <el-select
              v-model="editMember.payType"
              style="width: 150px"
              placeholder="请点击选择"
            >
              <el-option
                :label="item.name"
                v-for="(item, index) in payType"
                :key="index"
                :value="item.type"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员地址" prop="address">
            <el-input
              type="textarea"
              v-model.trim="editMember.address"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editForm('editMember')">取 消</el-button>
        <el-button type="primary" @click="editMemberForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import memberApi from "../../api/member";

let payType = [
  {
    type: "1",
    name: "现金",
  },
  {
    type: "2",
    name: "微信",
  },
  {
    type: "3",
    name: "支付宝",
  },
  {
    type: "4",
    name: "银行卡",
  },
];

export default {
  data() {
    return {
      page: 1,
      size: 7,
      total: 0,
      memberSearch: {
        id: "",
        cardNum: "",
        name: "",
        payType: "",
        birthday: "",
      },
      memberList: [],
      payType: payType,
      dialogVisible: false,
      addMember: {
        cardNum: "",
        name: "",
        birthday: "",
        phone: "",
        money: "",
        integral: "",
        payType: "",
        address: "",
      },
      addRules: {
        cardNum: [
          { required: true, message: "请输入会员卡号", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入会员名字", trigger: "blur" }],
        birthday: [
          { required: true, message: "请输入会员生日", trigger: "change" },
        ],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        money: [{ required: true, message: "请输入开卡金额", trigger: "blur" }],
        integral: [
          { required: true, message: "请输入可用积分", trigger: "blur" },
        ],
        payType: [
          { required: true, message: "请输入支付类型", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入会员地址", trigger: "blur" },
        ],
      },
      editMember: {
        cardNum: "",
        name: "",
        birthday: "",
        phone: "",
        money: "",
        integral: "",
        payType: "",
        address: "",
      },
      editRules: {
        cardNum: [
          { required: true, message: "请输入会员卡号", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入会员名字", trigger: "blur" }],
        birthday: [
          { required: true, message: "请输入会员生日", trigger: "change" },
        ],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        money: [{ required: true, message: "请输入开卡金额", trigger: "blur" }],
        integral: [
          { required: true, message: "请输入可用积分", trigger: "blur" },
        ],
        payType: [
          { required: true, message: "请输入支付类型", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入会员地址", trigger: "blur" },
        ],
      },
      editDialogVisible: false,
    };
  },
  created() {
    this.getMemberList();
  },
  mounted() {},
  filters: {
    filterPayType(val) {
      let data = payType.find((item, index) => {
        return item.type == val;
      });
      return data.name;
    },
  },
  methods: {
    getMemberList() {
      memberApi
        .getMemberList(this.page, this.size, this.memberSearch)
        .then((response) => {
          if (response.data.flag) {
            this.memberList = response.data.data.rows;
            this.total = response.data.data.total;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    removeMember(id) {
      memberApi
        .removeMember(id)
        .then((response) => {
          if (response.data.flag) {
            this.$message.success(response.data.message);
            this.getMemberList();
          } else {
            this.$message.error(response.data.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.size = val;
      this.getMemberList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getMemberList();
    },
    searchMember() {
      this.getMemberList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getMemberList();
    },
    addForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
    addMemberForm() {
      this.$refs["addMember"].validate((valid) => {
        if (valid) {
          memberApi
            .addMember(this.addMember)
            .then((response) => {
              if (response.data.flag) {
                this.getMemberList();
                this.$message.success(response.data.message);
                this.$refs["addMember"].resetFields();
                this.dialogVisible = false;
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          this.$message.error("输入内容有误");
        }
      });
    },
    openEditDialog(id) {
      memberApi
        .searchMember(id)
        .then((response) => {
          if (response.data.flag) {
            this.editMember = response.data.data.rows[0];
            this.editDialogVisible = true;
            let data = payType.find((item, index) => {
              return item.type == response.data.data.rows[0].payType;
            });
            return this.editMember.payType = data.name;
          }else{
            this.$message.error(response.data.message)
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    editForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
    editMemberForm() {
      this.$refs["editMember"].validate((valid) => {
        if (valid) {
          memberApi
            .editMember(this.editMember.id, this.editMember)
            .then((response) => {
              console.log(response);
              if (response.data.flag) {
                this.getMemberList();
                this.$refs["editMember"].resetFields();
                this.editDialogVisible = false;
                this.$message.success(response.data.message);
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          this.$message.error("输入内容有误");
        }
      });
    },
  },
};
</script>

<style scoped >
.el-pagination {
  margin-top: 10px;
}
.el-form {
  margin-top: 20px;
}
</style>
